<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>咨询系统</el-breadcrumb-item>
			<el-breadcrumb-item>分量设置</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-header>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="formInline.LoginName"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-header>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="Id" label="编号">
					</el-table-column>
					<el-table-column prop="UserName" label="登录名">
					</el-table-column>
					<el-table-column prop="CheckinTime" label="签到时间">
					</el-table-column>
					<el-table-column prop="CheckState" label="打卡状态">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.CheckState=='签退'" type="success">{{scope.row.CheckState}}</el-tag>
							<el-tag v-if="scope.row.CheckState=='已签到未签退'">{{scope.row.CheckState}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="CheckOutTime" label="签退时间">
					</el-table-column>
					<el-table-column prop="Weight" label="权重">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" icon="el-icon-s-opportunity" size="mini"
								@click="SetWeight(scope.row)" plain>设置权重</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[3, 5, 10, 20]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
				<el-dialog title="设置权重" :visible.sync="editDialogVisible" width="50%">
					<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
						<el-form-item label="权重" prop="Weight">
							<el-input v-model.number="editForm.Weight"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="editDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="editUserInfo">确 定</el-button>
					</span>
				</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {

			return {
				formInline: {
					LoginName: ''
				},
				tableData: [],
				page: 1,
				limit: 10,
				total: 10,
				editDialogVisible: false,
				editForm: {
					Id:'',
					Weight: ''
				},
				editFormRules: {
					Weight: [
						{
							type: 'number',
							message: '权重必须为数字值'
						},
						{
							pattern: /^(0|[1-9]\d?|100)$/,
							message: '范围在0-100',
							trigger: 'blur'
						}
					]
				},
			}
		},
		methods: {
			SetWeight(row){
				this.editDialogVisible=true;
				this.editForm=row;
				this.editForm.Id=row.Id;
			},
			editUserInfo(){
				let _this=this;
					this.$http.post('api/Weight/EditWeight',this.editForm)
					.then(function(res){
						if(res.data.data!=0){
							_this.$message.success("设置成功");
							_this.editDialogVisible=false;
							_this.GetSignList();
						}
					})
					
			},
			onSubmit() {
				this.GetSignList();
			},
			async GetSignList() {
				const {
					data: res
				} = await this.$http.get('api/Weight/GetWeightList', {
					params: {
						page: this.page,
						limit: this.limit,
						LoginName: this.formInline.LoginName
					}
				})
				this.total = res.total;
				this.tableData = res.data;
			},
			QianDao() {},
			handleSizeChange(val) {
				this.page = val;
				this.GetSignList();
			},
			handleCurrentChange(val) {
				this.limit = val;
				this.GetSignList();
			}
		},
		created() {
			this.GetSignList();
		}
	}
</script>

<style scoped>
	.el-header {
		background-color: #fff;
		color: #333;
		text-align: left;
		padding-top: 15px;
		padding-left: 25px;
	}

	.el-main {
		background-color: #fff;
		color: #333;
		text-align: left;
		line-height: 20px;
	}
</style>

